﻿
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Progressbar - Animated</title>


  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



	
	<style>
	.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
	</style>
	
	
	<script type="text/javascript">


var counter = 0;
var countdown;


function init()
{
 var counter = 0;
 count();
}


function count()
{

if (counter < 100)
    {
    
	counter++;
	
	$("#progressbar").progressbar('value', counter);

	   if(counter < 100) 
	   {
       countdown = setTimeout('count()', 1000);
	   }
	}

}

</script>

	
	
	<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 10
		});
	});
	</script>
	


</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>
This progressbar has an animated fill by setting the
<code>background-image</code>
on the
<code>.ui-progressbar-value</code>
element, using css.
</p>
</div>


<input type="button" onclick="count()" value="Los"/>

</body>
</html>



